import {View, Text, Button} from 'react-native';
import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function Feed({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Feed</Text>
      <Button
        title="跳转到Profile"
        onPress={() => navigation.navigate('Profile')}
      />
      <Button
        title="跳转到Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

function Messages() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Messages</Text>
    </View>
  );
}

function Home({}) {
  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function Profile() {
  <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    <Text>Profile</Text>
  </View>;
}

function Settings() {
  <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    <Text>Settings</Text>
  </View>;
}

export default function index() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}
